<template>
	<view class="u-flex u-row-between commoditylist">
		<view class="item" v-for="item in goodsList" :key="item.img">
			<view class="goods-img">
				<u-image :src="item.img" style="height: 210rpx;" mode="aspectFit" width="100%">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
			<view class="goods-desc">
				<view class="goods-title u-line-2">
					{{ item.title || '华为智慧屏 S65 4K超薄全民屏 AI' }}
				</view>
				<view class="u-flex u-row-between collect">
					<view class="priceBox">
						<text class="symbol">￥</text>
						<text>500</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {};
		},
		props: {
			goodsList: {
				type: Array,
				default: () => [],
			},
		},
		mounted() {},
		methods: {
			// 跳转到活动详情页
			goodsDetails(item) {
				uni.navigateTo({
					url: '/pages/goods/goodsDetails?item=' + JSON.stringify(item)
				})
			}
		},
	};
</script>
<style lang="scss" scoped>
	$w_94: 94%;

	.commoditylist {
		flex-wrap: wrap;
	}

	.item {
		width: 210rpx;
	}

	.goods-img {
		position: relative;
		margin: 0 auto;
		height: 210rpx;
		width: 100%;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.goods-desc {
		width: 100%;
		padding: 12rpx 0rpx;
		box-sizing: border-box;
		background: #fff;
		margin: 0 auto;
		margin-bottom: 40rpx;
		>.goods-title {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #010103;
		}
	}

	.collect {
		margin-top: 12rpx;
		display: flex;
		.priceBox {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FA4F0B;
			line-height: 30rpx;
			.symbol {
				font-size: 20rpx !important;
				line-height: 20rpx;
			}
		}
		.payed{
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #A3A3A3;
			line-height: 20rpx;
		}
	}
</style>
